<template>
  <div>
    <tab-bar>
     <!-- 此时需要修改下插槽，使用v-solt -->
      <ItemBar path="/home" activeColor="pink">
        <template v-slot:img><img src="~@/assets/img/tabbar/home.svg"></template >
        <template v-slot:img-active><img src="~@/assets/img/tabbar/home_active.svg"></template> 
        <template v-slot:words><div>首页</div> </template>
      </ItemBar>
      <ItemBar path="/cart" activeColor="pink">
        <template v-slot:img><img src="~@/assets/img/tabbar/shopcart.svg"></template >
        <template v-slot:img-active><img src="../../../assets/img/tabbar/shopcart_active.svg"></template> 
        <template v-slot:words><div>购物车</div> </template>
      </ItemBar><ItemBar path="/category" activeColor="pink">
        <template v-slot:img><img src="~@/assets/img/tabbar/category.svg"></template >
        <template v-slot:img-active><img src="~@/assets/img/tabbar/category_active.svg"></template> 
        <template v-slot:words><div>分类</div> </template>
      </ItemBar>
      <ItemBar path="/profile" activeColor="pink">
        <template v-slot:img><img src="~@/assets/img/tabbar/profile.svg"></template >
        <template v-slot:img-active><img src="~@/assets/img/tabbar/profile_active.svg"></template> 
        <template v-slot:words><div>我的</div> </template>
      </ItemBar>
    </tab-bar>
  </div>
</template>  
<script>
  import TabBar from "../../common/tab-bar/TabBar.vue"
  import ItemBar from '../../common/tab-bar/ItemBar'
  export default {
    name:"MainTabBar",
    components:{
      TabBar,
      ItemBar,
    }

  }
</script>
<style scoped>
</style>